<template>
  <div class="exam-container">
    <div class="exam-header">
      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane key="all" tab="全部"></a-tab-pane>
        <a-tab-pane key="processing" tab="进行中"></a-tab-pane>
        <a-tab-pane key="notStarted" tab="未开始"></a-tab-pane>
        <a-tab-pane key="ended" tab="已结束"></a-tab-pane>
      </a-tabs>
      <a-input-search
        v-model:value="searchText"
        placeholder="请输入考试名称"
        style="width: 300px"
        @search="onSearch"
      />
    </div>
    
    <div class="exam-list">
      <a-row :gutter="[16, 16]">
        <a-col :span="8" v-for="exam in examList" :key="exam.id">
          <a-card hoverable @click="goToExamDetail(exam.id)" class="exam-card">
            <template #cover>
              <img :src="exam.cover" alt="exam cover" />
            </template>
            <a-card-meta :title="exam.title">
              <template #description>
                <p>考试时长：{{ exam.duration }}分钟</p>
                <p>开始时间：{{ exam.startTime }}</p>
                <p>结束时间：{{ exam.endTime }}</p>
                <a-tag :color="getStatusColor(exam.status)">
                  {{ getStatusText(exam.status) }}
                </a-tag>  
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <div class="pagination-container">
      <a-pagination
        v-model:current="pagination.current"
        v-model:pageSize="pagination.pageSize"
        :total="pagination.total"
        :show-total="(total) => `共 ${total} 条`"
        :show-size-changer="true"
        @change="handlePageChange"
        @showSizeChange="handlePageSizeChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'

const activeTab = ref('all')
const searchText = ref('')

// 分页配置
const pagination = reactive({
  current: 1,
  pageSize: 6,
  total: 0,
})

// 模拟考试数据
const examList = ref([
  {
    id: 1,
    title: '信息安全考试',
    duration: 120,
    startTime: '2024-03-15 15:00:00',
    endTime: '2024-03-15 17:00:00',
    status: 'processing',
    cover: 'https://img.freepik.com/free-vector/cyber-security-concept_23-2148532223.jpg'
  },
  {
    id: 2,
    title: '软件工程考试',
    duration: 90,
    startTime: '2024-03-16 09:00:00',
    endTime: '2024-03-16 10:30:00',
    status: 'notStarted',
    cover: 'https://img.freepik.com/free-vector/cyber-security-concept_23-2148532223.jpg'
  },
  {
    id: 3,
    title: '计算机网络考试',
    duration: 150,
    startTime: '2024-03-14 14:00:00',
    endTime: '2024-03-14 16:30:00',
    status: 'ended',
    cover: 'https://img.freepik.com/free-vector/cyber-security-concept_23-2148532223.jpg'
  },
  {
    id: 4,
    title: '数据库原理考试',
    duration: 100,
    startTime: '2024-03-17 10:00:00',
    endTime: '2024-03-17 11:40:00',
    status: 'notStarted',
    cover: 'https://img.freepik.com/free-vector/cyber-security-concept_23-2148532223.jpg'
  },
  {
    id: 5,
    title: '操作系统考试',
    duration: 120,
    startTime: '2024-03-18 14:00:00',
    endTime: '2024-03-18 16:00:00',
    status: 'notStarted',
    cover: 'https://img.freepik.com/free-vector/cyber-security-concept_23-2148532223.jpg'
  },
  {
    id: 6,
    title: '计算机组成原理考试',
    duration: 180,
    startTime: '2024-03-13 09:00:00',
    endTime: '2024-03-13 12:00:00',
    status: 'ended',
    cover: 'https://img.freepik.com/free-vector/cyber-security-concept_23-2148532223.jpg'
  }
])

// 获取考试列表数据
const fetchExamList = async () => {
  try {
    // 这里模拟API调用
    // const response = await api.getExamList({
    //   page: pagination.current,
    //   pageSize: pagination.pageSize,
    //   status: activeTab.value,
    //   keyword: searchText.value
    // })
    
    // 模拟设置总数
    pagination.total = 25
  } catch (error) {
    console.error('获取考试列表失败:', error)
  }
}

// 页码改变
const handlePageChange = (page: number, pageSize: number) => {
  pagination.current = page
  pagination.pageSize = pageSize
  fetchExamList()
}

// 每页条数改变
const handlePageSizeChange = (current: number, size: number) => {
  pagination.current = 1
  pagination.pageSize = size
  fetchExamList()
}

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    processing: 'green',
    notStarted: 'blue',
    ended: 'gray'
  }
  return colorMap[status] || 'blue'
}

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    processing: '进行中',
    notStarted: '未开始',
    ended: '已结束'
  }
  return textMap[status] || '未知状态'
}

const onSearch = (value: string) => {
  pagination.current = 1 // 搜索时重置到第一页
  fetchExamList()
}

// 监听标签页变化
watch(activeTab, () => {
  pagination.current = 1 // 切换标签时重置到第一页
  fetchExamList()
})

const router = useRouter()

const goToExamDetail = (examId: number) => {
  router.push(`/exam/${examId}`)
}

onMounted(() => {
  fetchExamList()
})
</script>

<style lang="scss" scoped>
.exam-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;

  .exam-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .exam-list {
    margin-top: 24px;

    .exam-card {
      :deep(.ant-card-cover) img {
        height: 140px;
        object-fit: cover;
      }

      :deep(.ant-card-body) {
        padding: 14px;

        .ant-card-meta-title {
          font-size: 14px;
          margin-bottom: 8px;
        }

        .ant-card-meta-description {
          font-size: 12px;

          p {
            margin-bottom: 4px;
            line-height: 1.5;
          }
        }
      }
    }
  }

  .pagination-container {
    margin-top: 24px;
    text-align: right;
  }
}
</style>